<template>
    <div class="inputDom" :style="inputStyles">
        <input v-if="isNumber == 0" class="myInput" :placeholder="select.hit" v-model="inputValue"
            :class="select.isHit ? 'pd3' : ''">
        <input v-if="isNumber == 1" class="myInput" :placeholder="select.hit" v-model="inputValue"
            :class="select.isHit ? 'pd3' : ''" type="number" @input="formatInput1" ref="input1">
        <input v-if="isNumber == 2" class="myInput" :placeholder="select.hit" v-model="inputValue"
            :class="select.isHit ? 'pd3' : ''" type="number" @input="formatInput2" ref="input2">

        <div class="leftText">{{ leftText }}</div>

        <div @click="handClick" class="title" :style="selectStyles">
            <div class="pd" :class="select.isSelect ? 'pd2' : ''">{{ select.nowSelectName }}</div>
            <img class="imgRow pd" src="../../assets/images/upRow.svg">
        </div>

        <div class="popup" v-if="show && isDict" :style="selectStyles">
            <div class="item_name" v-for="s in dataList" v-bind:key="s" @click="selectItem2(s)">
                <div v-if="s[key1] === select.nowSelectName" class="item_name_default">{{ s[key1] }}</div>
                <div v-else>{{ s[key1] }}</div>
            </div>
        </div>

        <div class="popup" v-if="show && !isDict" :style="selectStyles">
            <div class="item_name" v-for="s in dataList" v-bind:key="s" @click="selectItem(s)">
                <div v-if="s === select.nowSelectName" class="item_name_default">{{ s }}</div>
                <div v-else>{{ s }}</div>
            </div>
        </div>
    </div>

    <div class="overlay" v-if="show" @click="handClick"></div>
</template>
    
<script>

export default {
    name: 'CommonInputAndUnitSelect',
    emits: ['returnData', 'clearData', 'mustCount'],
    components: {
    },
    props: {
        isShowLeftText: {
            default: false,
            type: Boolean
        },
        leftText: {
            default: '',
            type: String
        },
        isNumber: {
            default: 0,
            type: Number
        },
        inputStyles: {
            default: { width: '160px' }
        },
        selectStyles: {
            default: { 'min-width': '60px' }
        },
        dataList: Array,
        default: [String, Number],
        value: {
            default: ''
        },
        isMust: {
            default: false,
            type: Boolean
        },
        mustHit: {
            default: '',
            type: String
        },
        insertKey: String,
        isDict:Boolean,
        key1:String,
        key2:String,
        defaultValue:{
            default:'',
            type:[String,Number]
        },
        max: {
            default: 9999999999,
            type: Number
        },
    },
    data() {
        return {
            show: false,
            select: {
                isSelect: false,
                nowSelectName: this.default,
                isHit: false,
                hit: ''
            },
            tempValue:'',
            inputValue: this.value
        }
    },
    mounted() {
    },
    methods: {
        handClick() {
            this.show = !this.show
        },
        selectItem(s) {
            this.select = {
                isSelect: true,
                nowSelectName: s,
                isHit: false
            }
            this.show = !this.show
            let temp = { [this.insertKey]: this.inputValue + this.select.nowSelectName }
            return this.$emit('returnData', temp)
        },

        selectItem2(s) {
            this.select = {
                isSelect: true,
                nowSelectName: s[this.key1],
                isHit: false
            }
            this.tempValue=s[this.key2]
            this.show = !this.show
            let temp = { [this.insertKey.split(',')[0]]: this.inputValue,[this.insertKey.split(',')[1]]: s[this.key2] }
            return this.$emit('returnData', temp)
        },
        formatInput1(e) {
            // 格式化输入值
            let targetValue = e.target.value
            if (Number(targetValue.replace(/[^0-9]/g, '')) > this.max) {
                targetValue = String(this.max);
            }
            this.inputValue= targetValue.replace(/[^0-9]/g, '');
        },
        formatInput2(e) {
            // 格式化输入值
            let targetValue = e.target.value
            if (Number(targetValue.replace(/[^0-9.]/g, '')) > this.max) {
                targetValue = String(this.max);
            }
            this.inputValue = targetValue
                .replace(/[^0-9.]/g, '')
                .replace(/^(\d+\.?\d?)(\d{2})\d*$/, '$1$2');
        },
        inputReturn() {
            let flag=true
            if (this.isMust) {
                if(!String(this.inputValue)?.trim()){
                    this.select.hit = this.mustHit
                    this.select.isHit = true
                    flag =false
                }
                if (this.select.nowSelectName == this.mustHit) {
                    flag = false
                }
            }
            return flag
        }
    },
    watch: {
        inputValue: {
            handler() {
                this.select.isHit = false
                let temp = { [this.insertKey]: this.inputValue + this.select.nowSelectName }
                if(this.isDict){
                    temp = { [this.insertKey.split(',')[0]]: this.inputValue,[this.insertKey.split(',')[1]]: this.tempValue }
                    return this.$emit('returnData', temp)
                }else{
                    return this.$emit('returnData', temp)
                }
            }
        },
        value() {
            if (this.inputValue == '' || this.inputValue == null) {
                let temp = this.value
                this.dataList.forEach(element => {
                    temp=temp.replace(element, '')
                });
                this.inputValue = temp
            }
        },
        default(){
            this.select.nowSelectName=this.default
            this.tempValue=this.defaultValue
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
.inputDom {
    display: flex;
    align-items: center;
    position: relative;
}

.myInput {
    outline: none;
    height: 20px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 8px;
    padding-right: 20px;
    border-radius: 3px;
    font-size: 12px;
    position: relative;
    margin: 1px;
    width: 100%;
}

.myInput:focus {
    border: 1px solid #6698ff;
}

.leftText {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 22px;
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.title {
    display: flex;
    align-items: center;
    background: white;
    border-left: 1px solid #e1e1e1;
    font-size: 12px;
    border-radius: 2px;
    color: rgb(153, 153, 153);
    position: absolute;
    height: 20px;
    right: 0px;
    margin-right: 2px;
    text-align: center;
}

.title2 {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid red;
    font-size: 12px;
    width: 120px;
    border-radius: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: rgb(153, 153, 153);
    margin: 1px;
    position: relative;
}

.pd {
    width: 100%;
    white-space: nowrap;
}

.pd2 {
    color: black;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
    border: 1px solid red;
}

.pd3::placeholder {
    color: red;
}

.pd3::before {
    content: '*';
    color: red;
    position: absolute;
    left: 9px;
    margin-top: 4px;
}

.popup {
    position: absolute;
    background: white;
    border: 1px solid #eee;
    box-shadow: 1px 1px 15px #e5e5e5;
    z-index: 1;
    font-size: 13px;
    font-size: 12px;
    margin-left: 98px;
    top: 25px;
}

.imgRow {
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    padding-left: 5px;
}

.item_name {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.item_name:hover {
    background-color: #eee;
}

.item_name_default {
    color: #6698ff;
}</style>